﻿@{
    ViewBag.Title = "TreeAndListDemo";
}

<h2>TreeAndListDemo</h2>

<div id="app">



    <div id="treeView">
        <ul class="subEntries"></ul>
    </div>


    <div id="listView">
        <ul class="entries"></ul>
    </div>

    <div id="metaView">
        <ul class="metadata"></ul>
        <ul class="actions"></ul>
    </div>
</div>





@section scripts {

    @CoffeeScripts.Render("~/CoffeeScripts/shared/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/models/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/controllers/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/coffee")
    @Scripts.Render("~/Scripts/coffee-script.js", "~/bundles/waypoint")
    <style>
        #app
        {
        }

        #treeView
        {
            width: 25%;
            float: left;
            margin-top: 5px;
            margin-right: 4px;
            margin-left: 10px;
            padding-top: 5px;
            background-color: #ffffff;
        }

        #listView
        {
            width: 45%;
            float: left;
            margin: 7px;
            margin-bottom: 0px;
            overflow: hidden;
            background-color: #ffffff;
        }

        #metaView
        {
            width: 25%;
            float: left;
            margin: 7px;
            margin-bottom: 0px;
            overflow: hidden;
            background-color: #ffffff;
        }

            #metaView ul.metadata
            {
                padding-left: 2px;
            }


        div.entryItem
        {
            height: 40px;
        }

            div.entryItem span.label
            {
                font-weight: normal;
            }

        div.entryItem
        {
            padding: 5px;
        }

            div.entryItem img
            {
                height: 40px;
                width: 40px;
                vertical-align: text-top;
            }

        ul.subEntries
        {
            padding: 0px 0px 0px 10px;
        }

        .ui-button .ui-button-text
        {
            line-height: 1.0;
        }
    </style>

    <script type="text/x-jquery-tmpl" id="entryTemplate">
        <div class="entryItem" title="${metadata.text}">
            <img class="ul-li-icon" src="${links.typeInfo.url}?rel=largeIcon" />
            <span class="label">
                <a href="#" rel="external" class="changePath">${label}</a>
            </span>
        </div>
    </script>

    <script type="text/x-jquery-tmpl" id="treeHeaderTemplate">
        <img class="ul-li-icon" src="${links.typeInfo.url}?rel=smallIcon" />
        <span class="label">
            <a href="#" rel="external" class="changePath">${label}</a>
        </span>
    </script>


    <script type="text/x-jquery-tmpl" id="treeItemTemplate">
        <span class="toggleExpand ui-icon" style="display: inline-block"></span>
        <span class="header"></span>
        <ul class="subEntries"></ul>
    </script>

    <script type="text/x-jquery-tmpl" id="metadataTemplate">
        <div class="label">${key}:</div>
        <div class="value">
            {{if type == "array" }}
              {{each value}}
                 {{if isEditing == true}}<input type="checkbox" class="${key}" name="${key}" value="${$value}" checked="checked">${$value}</input>{{else}}${$value}{{/if}}                                  
              {{/each}}
            {{else}}
              ${value}
            {{/if}}
            {{if canEdit == true}}
            {{if isEditing == true}}<a href="#" class="save">save</a>{{else}}<a href="#" class="add">add</a> <a href="#" class="edit">edit</a>{{/if}}
            {{/if}}
            &nbsp; 
        </div>

    </script>



    <script type="text/coffeescript">

$(document).ready(() ->
  app = new Cofe.App({ el : $("#app") })
  app.render()
)
    </script>

    <script type="text/coffeescript">

    </script>
}
